<script setup lang="ts">
import { reactive } from "vue";
import { useDrop } from "vue3-dnd";
import DraggableBox from "./DraggableBox.vue";
import { ItemTypes } from "./ItemTypes";
import { DragItem } from "./interfaces";
import { snapToGrid as doSnapToGrid } from "./snapToGrid";

const props = defineProps<{
  snapToGrid: boolean;
}>();

interface BoxMap {
  [key: string]: { top: number; left: number; title: string };
}

const boxes = reactive<BoxMap>({
  a: { top: 20, left: 80, title: "Drag me around" },
  // b: { top: 180, left: 20, title: "Drag me too" },
});
const moveBox = (id: string, left: number, top: number) => {
  Object.assign(boxes[id], { left, top });
};

const [, drop] = useDrop(() => ({
  accept: ItemTypes.BOX,
  drop(item: DragItem, monitor) {
    const delta = monitor.getDifferenceFromInitialOffset() as {
      x: number;
      y: number;
    };

    let left = Math.round(item.left + delta.x);
    let top = Math.round(item.top + delta.y);
    if (props.snapToGrid) {
      [left, top] = doSnapToGrid(left, top);
    }

    moveBox(item.id, left, top);
    return undefined;
  },
}));
</script>

<template>
  <div :ref="drop" class="container">
    <div
      v-for="n in 9"
      :key="n"
      :style="{ position: 'absolute', left: 0, top: n * 32 + 'px', borderBottom: '1px solid red', right:0}"
    ></div>
    <div
      v-for="n in 9"
      :key="n"
      :style="{ position: 'absolute', top: 0, left: n * 32 + 'px', border: '1px solid red', bottom:0}"
    ></div>

    <DraggableBox v-for="(value, key) in boxes" :id="key" :key="key" v-bind="value" />
  </div>
</template>

<style scoped>
.container {
  position: relative;
  width: 320px;
  height: 320px;
  border: 1px solid black;
}
</style>
